<template>
    <!--一条订单-->
    <div class="ord-mp">
        <van-steps direction="vertical" :active="1" active-color="#f22d41">
            <van-step v-for="(item,index) in stepsData" :key="index">
                <p class="p4" v-text="item.context"></p>
                <p class="p3" v-text="item.time"></p>
            </van-step>
        </van-steps>
    </div>
</template>

<script>
    // import { Step, Steps } from 'vant';
    // Vue.use(Step).use(Steps);
    export default {
        name: 'Steps',
        // 步骤条
        props: {
            stepsData: {
                type: Array
            },
        },
        methods: {
            screen() {
                //    筛选
            }
        },
        watch: {}
    };
</script>

<style lang="stylus" scoped>
    @import '~assets/main.styl'
    .ord-mp {
        p {
            font-size word12
        }
    }

    .p4 {
        line-height 1.2
        color gray9
    }

    >>> .van-step__title {
        h3 {
            color #000
        }
    }

    >>> .van-step--vertical .van-step__line {
        background grayE
    }

    >>> .van-step .van-step__circle {
        background grayE
    }

    >>> .van-step--vertical {
        padding: 14px 10px 14px 0;
    }

</style>
